<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/echarts.min.js}"></script>
</head>

<body>
<div id="echartmain" style="width: 600px; height: 400px;"></div>
<form id="loginForm">
    <button type="button" name="getRelation" id="getRelation">获取关系图</button>
</form>
</body>
<script type="text/javascript">
    var personPosionData = [];
    var personLinks = [];
    var option = {
        title: {
            text: '人物关系图',
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
            {
                type: 'graph',
                layout: 'none',
                symbolSize: 50,
                roam: true,
                label: {
                    show: true,
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    fontSize: 20,
                },
                data: personPosionData,
                links: personLinks,
                lineStyle: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0,
                },
            },
        ],
    };
    var myChart = echarts.init(document.getElementById('echartmain'));
    $('#getRelation').click(function () {
        $.ajax({
            url: '/getData',
            dataType: 'json',
            type: 'post',
            data: {},

            success: function (result) {
                var data = result;
                // 处理result,把处理后的数据放入personPosionData和personLinks
                var xs = 300;
                var ys = 300;
                $.each(data, function (index, item) {
                    alert(xs);
                    personPosionData.push({
                        name: item.name,
                        x: 50+xs, // 坐标可写个函数生成或者在数据库写好，（更具实际需求需要调位置）
                        y: 60+ys,
                    });
                    xs = 50+xs;
                    ys = 60+ys;
                    //第二层循环
                    var data2 = item.friendsPerson;
                    $.each(data2, function (index2, item2) {
                        // personPosionData.push({
                        //     name: item.name,
                        //     x: 300, // 坐标可写个函数生成或者在数据库写好，（更具实际需求需要调位置）
                        //     y: 300,
                        // });
                        personLinks.push({
                            // 节点关系逻辑写函数生成。。
                            source: item.name, // 起始人
                            target: item2.name// 链接人
                        });
                    });
                });
                myChart.setOption(option);
            },
            error: function (data) {
                alert('请求出错');
                alert(data);
            },
        });
    });
    myChart.setOption(option);
</script>
</html>
